<template>
	<view class="zone">
		<Header title="最新公告" color="#fff"></Header>
		<!-- 下面的每一项 -->
		<view class="main">
			<view class="box">
				<scroll-view scroll-y class="scrollbox">
					<view class="lsit">
						<view class="item" v-for="(item,index) in datalist" @click="jinCount(item)" :key="index">
							<text>{{item.title}}</text>
							<image src="http://img.cpgm.cc/panda/static/my/you.png" class="you" mode="widthFix"></image>
						</view>
						
						<view class="empty" v-if="datalist.length == 0">
							<image src="http://img.cpgm.cc/panda/static/public/empty.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				datalist:'',
			}
		},
		onLoad(){
			this.getNewsList(1)
		},
		methods: {
			// 点击进入公告内容
			// jinCount(item) {
			// 	this.$p.navto('/pages/index/noticeCount')
			// },

			// 平台公告
			async getNewsList(type) {
				let res = await this.$http.index.getNewsList({
					type: type
				})
				this.datalist = res.data
			},

			// 消息跳转
			jinCount(item) {
				this.$p.navto(`/pages/index/noticeCount?title=${item.title}&content=${item.content}`)
			},
		}
	}
</script>

<style lang="scss">
	.zone {
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
		min-height: 100vh;
	}

	.main {
		padding: 10px;
	}

	.box {
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 7px;
		padding: 10px;
	}

	.scrollbox {
		height: calc(100vh - 100px);
	}

	.item {
		background: #FFFFFF;
		border-radius: 7px;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;

		text {
			color: #131314;
			font-size: 14px;
			font-weight: 600;
		}

		image {
			width: 10px;
		}
	}

</style>